<template>
  <div>
    <div class="flex items-center mb-11px cursor-pointer" @click="goPath">
      <span class="text-18px text-white tracking-wider font-bold mr-5px">{{ props.name }}</span>
      <img class="cursor-pointer" :src="GoActivityIcon" alt="" />
    </div>
    <slot v-if="$slots.footer" name="footer"></slot>
    <div v-else class="rounded-4px w-210px h-250px">
      <img class="w-full h-full rounded-4px" :src="props.img" alt="" />
    </div>
  </div>
</template>

<script setup lang="ts">
import GoActivityIcon from '@renderer/assets/goActivity.svg'
import { useRouter } from 'vue-router'
const router = useRouter()

const props = defineProps({
  name: String,
  img: {
    type: String,
    required: false
  },
  path: {
    type: [String, Object],
    required: false
  }
})

const goPath = () => {
  console.log(props.path)
  if (props.path) {
    router.push(props.path)
  }
}
</script>

<style scoped></style>
